import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/scatter/lit-scatter.ts"
import {ScatterProps} from "../../../echarts/scatter/lit-scatter.ts";

const meta: Meta<ScatterProps> = {
    title: 'Echarts/LitScatter',
    tags: ['autodocs'],
    render: (args: ScatterProps): TemplateResult => {
        return html`<lit-scatter 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .symbolSize=${args.symbolSize}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        symbolSize: { control: 'number' },
        seriesData: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<ScatterProps>;

export const BasicScatter: Story = {
    args: {
        chartId: 'basic-scatter-chart',
        width: '1200px',
        height: '600px',
        symbolSize: 20,
        seriesData: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68]
        ]
    }
};